<template>
  <div :id="'dashboard' + id" style="width: 100%; height: 100%; margin: 0 auto;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Dashboard",
  props: ['id', 'value'],
  methods: {
    initEcharts() {
      let myChart = echarts.init(document.getElementById("dashboard" + this.id))

      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      let option = {
        series: [
          {
            type: 'gauge',
            z:100,
            axisLine: {
              lineStyle: {
                width: 5,
                color: [
                  [
                    0.3, new echarts.graphic.LinearGradient(
                      0, 1, 1, 0, [{
                        offset: 0,
                        color: 'rgba(0, 237, 3,0.1)',
                      }, {
                        offset: 0.5,
                        color: 'rgba(0, 237, 3,0.6)',
                      },
                        {
                          offset: 1,
                          color: 'rgba(0, 237, 3,1)',
                        }
                      ]
                  )
                  ],
                  [
                    0.7, new echarts.graphic.LinearGradient(
                      0, 1, 1, 0, [{
                        offset: 0,
                        color: 'rgba(255, 184, 0,0.1)',
                      }, {
                        offset: 0.5,
                        color: 'rgba(255, 184, 0,0.6)',
                      },
                        {
                          offset: 1,
                          color: 'rgba(255, 184, 0,1)',
                        }
                      ]
                  )
                  ],
                  [
                    1, new echarts.graphic.LinearGradient(
                      0, 1, 1, 0, [{
                        offset: 0,
                        color: 'rgba(175, 36, 74,0.1)',
                      }, {
                        offset: 0.5,
                        color: 'rgba(255, 36, 74,0.6)',
                      },
                        {
                          offset: 1,
                          color: 'rgba(255, 36, 74,1)',
                        }
                      ]
                  )
                  ]
                ],
              }
            },
            // radius: '50%',
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: 0,
              length: 8,
              lineStyle: {
                color: 'auto',
                width: 1
              }
            },
            splitLine: {
              distance: 0,
              length: 10,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            axisLabel: {
              show: false
            },
            detail: {
              valueAnimation: true,
              formatter: '{value} %',
              color: 'white',
              fontSize: 12
            },
            data: [{
              value: this.value
            }]
          },
        ]
      }

      myChart.setOption(option)
    }
  },
  mounted() {
    this.initEcharts()
  }
}
</script>

<style scoped>

</style>
